<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- elementUI -->
    <link rel="stylesheet" href="frame/elementUI/lib-master/theme-chalk/index.css"/>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="frame/elementUI/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="frame/elementUI/lib-master/index.js"></script>

    <!-- bootstrap -->
    <link href="frame/bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="frame/bootstrap3/jquery-1.9.1.min.js"></script>
    <script src="frame/bootstrap3/js/bootstrap.js"></script>
    <!-- 字体图标 -->
    <link rel="stylesheet" href="frame/bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="css/top.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
    <link rel="stylesheet" type="text/css" href="css/reg.css" />
    <link rel="stylesheet" type="text/css" href="css/footer.css" />
    <title>Title</title>

</head>
<body id="#app">
    <!--头部-->
    <header class="header">
        <img src="images/index/stumalllogo.png" alt="" />
        <span class="pull-right"><small>欢迎访问</small><b>电脑商城</b></span>
    </header>
    <!--主体-->
    <div class="container mycontent text-left">
        <!--透明层 -->
        <div class="regDiv" id="app">
            <p>用户登录</p>
            <div style="margin-top: 70px">
                <!-- 用户名登录 -->
                <el-form :model="formUser" mstatus-icon :rules="rules1" ref="formUser" label-width="100px" v-show="patternName"> <!-- ref:表单验证(和提交数据相同) -->
                    <el-form-item label="用户名：" prop="username">  <!-- prop的值与rules里面要验证的字段值是对应 -->
                        <el-input
                                prefix-icon="el-icon-user" style="width: 250px"
                                type="text" v-model="formUser.username" autocomplete="off">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="密 码：" prop="password">
                        <el-input
                                prefix-icon="el-icon-menu"
                                style="width: 250px" show-password type="password"
                                v-model="formUser.password" autocomplete="off">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button el-button type="primary" @click="loginData()" style="margin-right: 100px">登录</el-button>
                        <span class="pull-right"><small>还没有账号？</small><a href="register.html">注册</a></span>
                    </el-form-item>
                </el-form>
                <!-- 邮箱验证登录 -->
                <el-form :model="formEmail" mstatus-icon :rules="rules2" ref="formEmail" label-width="100px" v-show="patternEmail"> <!-- ref:表单验证(和提交数据相同) -->
                    <el-form-item label="邮箱" prop="email">  <!-- prop的值与rules里面要验证的字段值是对应 -->
                        <el-input
                                prefix-icon="el-icon-paperclip" style="width: 250px"
                                type="text" v-model="formEmail.email" autocomplete="off">  <!-- autocomplete:自动补全 -->
                        </el-input>
                    </el-form-item>
                    <el-form-item label="验证码：" prop="verCode">
                        <el-input
                                prefix-icon="el-icon-menu"
                                style="width: 250px !important;" type="text"
                                v-model="formEmail.verCode" autocomplete="off">
                            <el-button slot="append" type="primary" @click="gainVerCode()" :disabled="showTime"><span v-show="showTime">{{downTime}}秒后</span>获取验证码</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button el-button type="primary" @click="loginEmail()" style="margin-right: 100px">登录</el-button>
                        <span class="pull-right"><small>还没有账号？</small><a href="register.html">注册</a></span>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 切换邮箱验证登录 -->
            <el-link type="success" @click="tradeIn()" style="float: right">{{patternString}}</el-link>
        </div>
    </div>

    <!--页脚-->
    <footer class="footer">
        <!-- 品质保障，私人定制等-->
        <div class="text-center rights container">
            <div class="col-md-offset-2 col-md-2">
                <span class="fa fa-thumbs-o-up"></span>
                <p>品质保障</p>
            </div>
            <div class="col-md-2">
                <span class="fa fa-address-card-o"></span>
                <p>私人订制</p>
            </div>
            <div class="col-md-2">
                <span class="fa fa-graduation-cap"></span>
                <p>学生特供</p>
            </div>
            <div class="col-md-2">
                <span class="fa fa-bitcoin"></span>
                <p>专属特权</p>
            </div>
        </div>
        <!--联系我们、下载客户端等-->
        <div class="container beforeBottom">
            <div class="col-md-offset-1 col-md-3">
                <div><img src="../images/index/stumalllogo.png" alt="" class="footLogo" /></div>
                <div><img src="../images/index/footerFont.png" alt="" /></div>
            </div>
            <div class="col-md-4 callus text-center">
                <div class="col-md-4">
                    <ul>
                        <li>
                            <a href="#">
                                <p>买家帮助</p>
                            </a>
                        </li>
                        <li><a href="#">新手指南</a></li>
                        <li><a href="#">服务保障</a></li>
                        <li><a href="#">常见问题</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <ul>
                        <li>
                            <a href="#">
                                <p>商家帮助</p>
                            </a>
                        </li>
                        <li><a href="#">商家入驻</a></li>
                        <li><a href="#">商家后台</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <ul>
                        <li>
                            <a href="#">
                                <p>关于我们</p>
                            </a>
                        </li>
                        <li><a href="#">关于圆心</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li>
                            <span class="fa fa-wechat"></span>
                            <span class="fa fa-weibo"></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4">
                <div class="col-md-5">
                    <p>电脑商城客户端</p>
                    <img src="../images/index/ios.png" class="lf">
                    <img src="../images/index/android.png" alt="" class="lf" />
                </div>
                <div class="col-md-6">
                    <img style="width: 120px;height: 120px" src="../images/index/erweima.png">
                </div>
            </div>
        </div>
        <!-- 页面底部-备案号 #footer -->
        <div class="col-md-12 text-center bottom">
            Copyright © 2022 dnsc.cn All Rights Reserved 京ICP备08963888号-45 <a target="_blank" href="http://www.dnsc.cn/">圆心科技集团有限公司</a> 版权所有
        </div>
    </footer>
</body>
    <script src="frame/axios/axios.min.js"></script>
    <script src="js/login.js"></script>
</html>